<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">功能</BreadcrumbItem>
			    <BreadcrumbItem href="/wechat/function/customer">客服</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<IForm :model="form" ref="form" :label-width="100" :rules="formRule">
			        <FormItem prop="account" label="客服账号">
			            <IInput v-model="form.account" size="large" placeholder="请输入客服账号" >
			            </IInput>
			        </FormItem>
			        <FormItem prop="nickname" label="客服昵称">
			            <IInput v-model="form.nickname" size="large" placeholder="请输入客服昵称" />
			        </FormItem>
			        <FormItem prop="headimgurl" label="客服头像">
						<UploadPic :callback="uploadPicSuccess" ref="uploadpic"></UploadPic>
			        </FormItem>
			        <FormItem>
			        	<Button type="primary" @click="submit('form')" :disabled="disabled">提交</Button>
			        </FormItem>
			    </IForm>
		    </div>
		</div>
	</div>
</template>
<script>
	import {Breadcrumb,Form,Input,Button} from 'view-design';

    import UploadPic from 'admin/components/common/upload-pic';

	export default{
		data () {
			const validateAccount = (rule, value, callback) => {
                this.Axios.Wechat.Function.Customer.CheckUniqueAccount({id:this.form.id,account:this.form.account})
                .then(res =>{
                    if(!res){callback();return false;}
                    if(res.data.bool){
                    	callback(new Error(res.msg));return false;
                    }
                    callback();
                })
            };
            return {
                form :{
					id : 0,
					account : '',
					nickname : '',
					headimgurl : '',
					openid : '',
                },
                disabled : false,
                formRule: {
	                account: [
	                	{ required: true, min:2, max:10, message: '请填写客服帐号,长度2-10位', trigger: 'blur' },
	                	{ pattern :/^[a-zA-Z0-9_]{1,}$/,message:'账号只能输入英文、数字字符或者下划线'},
	                	{ validator: validateAccount, trigger: 'blur' }
	                ],
	                nickname :[
	                	{ required: true, message: '请填写客服昵称,最长16字',max:16, trigger: 'blur' },
	                	{ pattern :/^[\d|A-z|\u4E00-\u9FFF]+$/,message:'账号只能输入简繁中文和任意数字以及字母'},
	                ],
	                headimgurl :[
	                	{ required: true, message: '请上传客服头像' },
	                ],
	            },
            }
        },
		components:{
            Breadcrumb,
            "BreadcrumbItem" : Breadcrumb.Item,
            'IInput' : Input,
			'IForm' : Form,
			'FormItem' : Form.Item,
			Button,
			UploadPic,
        },
        methods: {
        	submit(name){
        		this.disabled = true;
        		this.$refs[name].validate((valid) => {
        			this.disabled = false;
	                if (!valid) {
	                    return false;
	                }
	                this.Axios.Wechat.Function.Customer.Update(this.form)
	                .then(res =>{
	                    if(!res) return false;
	                   	this.$router.push('/wechat/function/customer');
	                })
	            })
        	},
        	uploadPicSuccess(pics){
        		this.form.headimgurl = pics[0]['url'];
        	}
        },
        created: function() {
	        //面包屑导航路径赋值、获取角色信息
	        if(this.$route.params.id===undefined){
	        	return false;
		    }
		    var id = this.$route.params.id;
		    this.Axios.Wechat.Function.Customer.Get(id)
            .then(res =>{
                if(!res) return false;
                var data = res.data;
                this.form.id = data.id;
                this.form.account = data.account.split("@")[0];
                this.form.nickname = data.nickname;
                this.form.headimgurl = data.headimgurl;
                this.$refs.uploadpic.pics.push({url:data.headimgurl});
            })
		}
	}
</script>